<!--
 * @Author: YWY
 * @Date: 2022-02-22 16:17:42
 * @LastEditors: YWY
 * @LastEditTime: 2022-03-06 17:29:53
-->
<template>
  <div class="header-container">
    <!-- 头部 -->
    <my-header title="搜索结果"></my-header>
    <!-- 标签栏 -->
    <div class="nav_tabs_container_searchPage">
      <van-tabs v-model:active="active">
        <van-tab title="文章"> </van-tab>
        <van-tab title="用户"> </van-tab>
      </van-tabs>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="search_content_container">
    <!-- 文章结果 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :finished-text="finishedText"
      @load="onLoad"
      :immediate-check="false"
    >
      <div v-show="active === 0">
        <post-cell
          v-for="item in articleList"
          :key="item.id"
          :title="item.title"
          :author="item.name"
          :postTime="item.postTime"
          :likes="item.likes"
          :replies="item.comments"
          :visits="item.visits"
          :createdAt="item.createdAt"
          :updatedAt="item.updatedAt"
          :cover_url="item.cover_url"
          :content="item.summary"
          @click="toAritclePage(item.id)"
        ></post-cell>
        <van-empty
          image="search"
          :description="`没有找到 ${search.searchValue} 相关结果`"
          v-if="!articleList.length"
        />
      </div>
    </van-list>
    <!-- 用户结果 -->
    <div v-show="active === 1">
      <div
        v-for="item in userList"
        :key="item.id"
        class="search_user_cell"
        @click="toOtherUserPage(item.id)"
      >
        <img :src="item.img" alt="" />
        <p>{{ item.name }}</p>
        <button
          @click.stop="addFollow(item.id)"
          v-if="!item.follow"
          class="unfollowed"
        >
          关注
        </button>
        <button
          @click.stop="disFollow(item.id)"
          v-if="item.follow"
          class="followed"
        >
          已关注
        </button>
      </div>
      <van-empty
        image="search"
        :description="`没有找到 ${search.searchValue} 相关结果`"
        v-if="!userList.length"
      />
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "@vue/runtime-core";
import { searchStore } from "@/store/searchData.js";
import PostCell from "../components/PostCell.vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { Empty, Toast } from "vant";
export default defineComponent({
  components: { PostCell, [Empty.name]: Empty },
  name: "Search",
  props: ["searchValue"],
  setup(props) {
    const search = searchStore();
    const router = useRouter();
    const active = ref(0);
    const { articleList, userList, finished } = storeToRefs(search);
    const loading = ref(false);

    //刷新时重新请求
    search.init(props.searchValue);

    //上拉加载更多文章
    const onLoad = () => {
      search.loadArticleList(props.searchValue);
      loading.value = false;
    };

    //finished文字控制
    const finishedText = computed(() => {
      if (articleList.value.length === 0 || active.value === 1) {
        return "";
      } else return "没有更多了";
    });

    //关注功能
    const addFollow = search.addFollow;

    //取消关注
    const disFollow = search.disFollow;

    const toAritclePage = (val) => {
      router.push({ path: `/article/${val}` });
    };

    const toOtherUserPage = (id) => {
      router.push({ path: `/others/${id}` });
    };

    return {
      search,
      active,
      onLoad,
      toAritclePage,
      toOtherUserPage,
      articleList,
      userList,
      addFollow,
      disFollow,
      finished,
      finishedText,
      loading,
    };
  },
});
</script>

<style lang='less'>
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  .nav_tabs_container_searchPage {
    .van-tabs__wrap {
      box-shadow: 0 0 2px 0 gray;
    }
  }
}

.search_content_container {
  position: relative;
  top: 90px;
  .search_user_cell {
    margin: 20px 20px;
    display: flex;
    // border: 1px solid black;
    align-items: center;
    justify-content: space-between;
    img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: gray;
    }
    p {
      margin: 0 5px;
      font-weight: bolder;
    }
    .unfollowed {
      background-color: transparent;
      border-radius: 4px;
      border: 1px solid rgb(70, 98, 217);
      flex: 0 50px;
      padding: 5px 5px;
      font-size: 15px;
      color: rgb(70, 98, 217);
    }
    .followed {
      color: gray;
      background-color: #dee1e6;
      border-radius: 4px;
      flex: 0 60px;
      padding: 5px 5px;
      font-size: 15px;
      border: none;
      box-shadow: 0 0 2px 1px gray;
    }
  }
}
</style>